/*
Theme Name: runoob
Theme URI: http://www.runoob.com/
Version: 1.0
Author: 菜鸟教程
Author URI: http://www.runoob.com/
Description:菜鸟教程 -- 学的不仅是技术，更是梦想
Tags: 绿色,三栏
*/
 a, abbr, address, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, label, legend, li, object, ol, p, pre, q, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul {
    border:0;
    margin:0;
    padding:0
}
blockquote {
    background-color:#f3f7f0;
    padding:10px;
    margin:10px;
    font-size:13px;
    line-height:2em;
}
article, aside, figcaption, figure, figure img, footer, header, hgroup, nav, object, section, video {
    display:block
}
div#htmlfeedback-container * {
    margin:0;
    padding:0
}
div#htmlfeedback-container {
    font-size:12px;
    background-color:#fff;
    border-left:1px solid #96b97d;
    border-top:1px solid #96b97d;
    position:fixed;
    right:0;
    bottom:0;
    z-index:5500;
    display:none
}
div#htmlfeedback-container.expanded {
    width:400px
}
div#htmlfeedback-container-more {
    padding:5px
}
div#htmlfeedback-container span {
    display:block;
    max-width:200px
}
div#htmlfeedback-container p {
    display:block;
    margin-bottom:5px;
    max-width:400px
}
div#htmlfeedback-container h3 {
    font-size:1.2em;
    margin-bottom:10px
}
div#htmlfeedback-container form input[type=reset], div#htmlfeedback-container form input[type=submit] {
    padding-left:10px;
    padding-right:10px;
    margin-top:10px;
    height:30px;
    border:1px solid #fff;
    background-color:#96b97d;
    color:#fff;
    font-size:12px;
    font-weight:bold
}
div#htmlfeedback-container form input[type=reset]:active, div#htmlfeedback-container form input[type=submit]:active {
    border:1px inset #5aa0b8
}
div#htmlfeedback-container textarea {
    width:350px;
    height:140px;
    line-height:24px;
    float:left;
    padding:0 3% 0 3%;
    background-color:#fff;
    text-align:initial;
    border:1px solid #c8c8c8;
    border-radius:3px;
    overflow:hidden;
    font-size:1.2em;
    color:#000;
    margin-bottom:10px
}
div#htmlfeedback-container .fb-guide {
    padding-top:10px;
    background-color:#f7f7f7;
    color:#9a9a9a;
    margin-left:-20px;
    padding-left:20px;
    border-right-width:0;
    margin-right:-20px;
    padding-right:25px;
    margin-bottom:-20px;
    padding-bottom:15px;
    margin-top:10px
}
div#htmlfeedback-container .fb-email {
    line-height:34px;
    left:9px;
    top:0;
    text-align:initial;
    white-space:nowrap;
    right:9px;
    height:35px;
    width:90%;
    padding:0 3% 0 3%;
    background-color:#fff;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#000;
    font-weight:400;
    font-size:1.2em
}
div#htmlfeedback-container div#htmlfeedback-more {
    display:block;
    background-color:#96b97d;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    padding:5px;
    cursor:pointer
}
div#htmlfeedback-container div#htmlfeedback-more div#htmlfeedback-close {
    padding-right:5px;
    float:right
}
div#htmlfeedback-container div#htmlfeedback-more div#htmlfeedback-close:hover {
    text-decoration:underline
}
a img {
    border:0
}
figure {
    position:relative
}
figure img {
    width:100%
}
.highLT {
    color:#170
}
.highGT {
    color:#170
}
.highCOM {
    color:#a50
}
.highELE {
    color:#170
}
.highATT {
    color:#00c
}
.highVAL {
    color:#a11
}
.row {
    width:100%;
    max-width:1260px;
    min-width:755px;
    margin:0 auto;
    overflow:hidden
}
.col, .eightcol, .elevencol, .fifteencol, .fivecol, .fourcol, .fourteencol, .ninecol, .onecol, .sevencol, .sixcol, .tencol, .thirteencol, .threecol, .twelvecol, .twocol {
    margin-right:1%;
    float:left
}
.onecol {
    width:4%
}
.twocol {
    width:10.4%
}
.threecol {
    width:16.8%
}
.fourcol, .left-column {
    width:14%;
    display:block
}
div.tutintro {
    width:auto;
    min-height:92px
}
div.tutintro img {
    float:left;
    margin-right:20px;
    margin-bottom:10px
}
.copyright, .fivecol {
    width:14%
}
.listcol {
    width:27.6%;
    float:left
}
.mediatemple {
    width:29.6%
}
.footer-nav, .search, .sixcol {
    width:36%
}
.middle-column-home {
    width:78%;
    margin-right:0;
    padding:12px 20px;
    border:1px solid #eaeaea;
    background-color:#fff;
    border-radius:4px
}
.eightcol {
    width:48.8%
}
.ninecol {
    width:55.2%
}
.logo, .tencol {
    width:61.6%
}
.elevencol, .middle-column {
    width:68%
}
.twelvecol {
    width:74.4%;
    float:left
}
.thirteencol {
    width:80.8%
}
.fourteencol {
    width:87.2%
}
.fifteencol {
    width:93.6%
}
.nav, .nav-sub, .profile-bar, .row-login-desktop, .row-login-mobile, .sixteencol {
    width:100%;
    float:left
}
.last {
    margin-right:0
}
embed, img, object {
    max-width:100%
}
img {
    height:auto
}
.btn {
    display:inline-block;
    padding:6px 12px;
    margin-bottom:0;
    font-size:14px;
    font-weight:400;
    line-height:1.428571429;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    border-radius:4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none
}
.example-btn {
    color:#fff;
    background-color:#5cb85c;
    border-color:#4cae4c
}
.example-btn:hover {
    color:#fff;
    background-color:#47a447;
    border-color:#398439
}
.example-btn:active {
    background-image:none
}
pre {
    margin:15px auto;
    font:12px/20px Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
    white-space:pre-wrap;
    word-break:break-all;
    word-wrap:break-word;
    border:1px solid #ddd;
    border-left-width:4px;
    background:#fbfbfb url(/images/codecolorer_bg.gif) top;
    padding:10px 15px
}
.right-list button {
    top:24px!important;
    margin-top:12px;
    display:none;
    background-color:#96b97d;
    float:right
}
.widget {
    position:relative;
    clear:both;
    width:auto;
    margin-bottom:2em;
    overflow:hidden
}
.widget-header {
    position:relative;
    height:40px;
    line-height:40px;
    background:#f6f6f6;
    background:-moz-linear-gradient(top, #f6f6f6 0, #f2efea 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #f2efea));
    background:-webkit-linear-gradient(top, #f6f6f6 0, #f2efea 100%);
    background:-o-linear-gradient(top, #f6f6f6 0, #f2efea 100%);
    background:-ms-linear-gradient(top, #f6f6f6 0, #f2efea 100%);
    background:linear-gradient(top, #f6f6f6 0, #f2efea 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f2efea');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f2efea')";
    border:1px solid #d6d6d6;
    -webkit-background-clip:padding-box
}
.widget-header h3 {
    position:relative;
    top:2px;
    left:10px;
    display:inline-block;
    margin-right:3em;
    font-size:14px;
    font-weight:800;
    color:#525252;
    line-height:18px;
    text-shadow:1px 1px 2px rgba(255, 255, 255, .5)
}
.widget-header .fa {
    display:inline-block;
    margin-left:13px;
    margin-right:-2px;
    font-size:16px;
    color:#555;
    vertical-align:middle
}
.widget-content {
    padding:20px 15px 15px;
    background:#FFF;
    border:1px solid #d5d5d5;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px
}
.widget-header+.widget-content {
    border-top:0;
    -webkit-border-top-left-radius:0;
    -webkit-border-top-right-radius:0;
    -moz-border-radius-topleft:0;
    -moz-border-radius-topright:0;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.widget-nopad .widget-content {
    padding:0
}
.widget-content:before, .widget-content:after {
    content:"";
    display:table
}
.widget-content:after {
    clear:both
}
.widget-content {
    zoom:1
}
.widget-table .widget-content {
    padding:0
}
.widget-table .table {
    margin-bottom:0;
    border:0
}
.widget-table .table tr td:first-child {
    border-left:none
}
.widget-table .table tr th:first-child {
    border-left:none
}
.widget-plain {
    background:transparent;
    border:0
}
.widget-plain .widget-content {
    padding:0;
    background:transparent;
    border:0
}
.widget-box .widget-content {
    background:#e3e3e3;
    background:#FFF
}
.shortcuts {
    text-align:center
}
.shortcuts a {
    float:left
}
.shortcuts .shortcut {
    width:12.4%;
    display:inline-block;
    padding:12px 0;
    margin:0 .9% 1em;
    vertical-align:top;
    text-decoration:none;
    background:#f6f6f6;
    border-radius:5px
}
.shortcuts .shortcut-label {
    display:block;
    font-weight:bold;
    color:#64854c;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
html {
    font-size:62.5%
}
body {
    margin:0;
    font-size:1.2em;
    font-family:Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    background:#f6f6f6 url(./assets/img/bg.gif) no-repeat;
    color:#333
}
button, input, select, textarea {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased
}
input[type=radio] {
    -webkit-appearance:radio
}
h1, h2, h3, h4 {
    font-size:1em
}
.mobile-nav {
    display:none
}
button, input, select, td, textarea, th {
    font-size:13px
}
button, input, select, textarea {
    outline:0
}
button:hover {
    cursor:pointer
}
h1 {
    margin:0 0 10px 0;
    font-size:2.1em;
    color:#64854c;
    text-decoration:none;
    text-indent:-9999px
}
.logo h1 {
    background-image:url(./assets/img/runoob-logo.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    width:258px;
    height:39px;
    margin-top:10px;
    margin-left:20px;
    display:block
}
.logo a {
    width:258px;
    height:39px;
    display:block
}
a {
    color:#64854c;
    text-decoration:none;
    -o-transition-duration:.2s;
    -o-transition-property:opacity;
    -webkit-transition-duration:.2s;
    -webkit-transition-property:opacity
}
table a {
    text-decoration:underline
}
a:hover {
    opacity:.8;
    color:#799961
}
li, ol, p, ul {
    line-height:1.5em
}
.socialicons .rss {
    background:url(./assets/img/rss.png);
    opacity:.7
}
input[type=submit] {
    cursor:pointer;
    color:#fff;
    padding:7px 10px 7px 10px;
    -webkit-appearance:none;
    width:80px;
    margin:10px 0 0 0;
    font-weight:700;
    text-shadow:0 1px 0 rgba(0, 0, 0, .2);
    border:1px solid rgba(87, 121, 63, .8);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#90b575;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%)
}
.socialicons input[type=submit] {
    width:18%;
    line-height:16px;
    margin:auto;
    float:right
}
.html5badge {
    background-image:url('/images/html5_badge20.png');
    background-repeat:no-repeat;
    background-position:right
}
table.browsersupport {
    border:1px solid #c3c3c3;
    border-collapse:collapse
}
table.browsersupport th {
    background-color:#e5eecc;
    border:1px solid #c3c3c3;
    padding:3px;
    vertical-align:middle
}
table.browsersupport td {
    border:1px solid #c3c3c3;
    padding:3px;
    vertical-align:middle;
    width:60px;
    height:32px;
    background-position:center;
    background-repeat:no-repeat;
    border:1px solid #dadada;
    text-align:center
}
table.browsersupport td.bsProperty {
    font-family:courier new;
    white-space:nowrap;
    text-align:left
}
table.browsersupport .bsIE {
    background-image:url(/images/compatible_ie.gif)
}
table.browsersupport .bsFirefox {
    background-image:url(/images/compatible_firefox.gif)
}
table.browsersupport .bsChrome {
    background-image:url(/images/compatible_chrome.gif)
}
table.browsersupport .bsSafari {
    background-image:url(/images/compatible_safari.gif)
}
table.browsersupport .bsOpera {
    background-image:url(/images/compatible_opera.gif)
}
table.browsersupport .bsNoIE {
    background-image:url(/images/incompatible_ie.gif)
}
table.browsersupport .bsNoFirefox {
    background-image:url(/images/incompatible_firefox.gif)
}
table.browsersupport .bsNoChrome {
    background-image:url(/images/incompatible_chrome.gif)
}
table.browsersupport .bsNoSafari {
    background-image:url(/images/incompatible_safari.gif)
}
table.browsersupport .bsNoOpera {
    background-image:url(/images/incompatible_opera.gif)
}
table.browsersupport .bsPreIE {
    background-image:url(/images/precompatible_ie.gif)
}
table.browsersupport .bsPreFirefox {
    background-image:url(/images/precompatible_firefox.gif)
}
table.browsersupport .bsPreChrome {
    background-image:url(/images/precompatible_chrome.gif)
}
table.browsersupport .bsPreSafari {
    background-image:url(/images/precompatible_safari.gif)
}
table.browsersupport .bsPreOpera {
    background-image:url(/images/precompatible_opera.gif)
}
.container {
    padding-left:10px;
    padding-right:10px
}
.main {
    margin-top:20px
}
.footer {
    background:#fff;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:20px;
    -moz-box-shadow:0 -1px 1px #ececec;
    box-shadow:0 -1px 1px #ececec
}
.logo-search {
    margin-top:17px;
    margin-bottom:15px
}
.navigation {
    background:#96b97d
}
.sub-navigation {
    background:#fff;
    -moz-box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
    margin-bottom:20px
}
.sub-navigation-mobile {
    display:none
}
.row-logo {
    margin-top:10px;
    margin-bottom:10px
}
.logo img {
    padding:10px 0 0 20px
}
.row-search-mobile {
    display:none
}
.search {
    text-align:right
}
.search form {
    background:#eeefed;
    padding:0;
    margin:0;
    padding:5px;
    border-radius:3px;
    margin:5px 0 0 0;
    text-align:center
}
.search input {
    line-height:34px;
    left:9px;
    top:0;
    text-align:initial;
    white-space:nowrap;
    right:9px;
    height:35px;
    width:94%;
    padding:0 3% 0 3%;
    background-color:#fff;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#ccc;
    font-weight:400;
    font-size:1.2em
}
.search input:focus {
    color:#333;
    opacity:.8
}
.nav .current {
    background-image:url(./assets/img/navarrow.png);
    background-repeat:no-repeat;
    background-position:center bottom
}
.nav-sub .current-cat a {
    color:#6a6a6a;
    background:#efefef;
    padding-right:8px;
    padding-left:8px;
    opacity:.7;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%)
}
.nav, .nav-sub, .profile-bar {
    padding:10px 0 0 20px;
    height:24px;
    font-size:1.1em;
    font-family:proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif
}
.nav {
    text-transform:uppercase
}
.nav ul, .nav-sub ul {
    list-style:none;
    white-space:nowrap
}
.nav li, .nav-sub li {
    display:inline;
    margin:0 20px 0 0
}
.nav li a, .nav-sub li a {
    padding:10px 0 10px 0;
    text-decoration:none
}
.nav li a {
    color:#fff
}
.nav li a:hover {
    color:#e3efd9
}
.nav-sub li a {
    color:#333
}
.nav-sub li a:hover {
    color:#777
}
hr {
    background-color:#d4d4d4;
    color:#d4d4d4;
    height:1px;
    border:0;
    clear:both
}
.search-reveal {
    display:none
}
.profile-bar {
    text-align:right;
    margin:0;
    padding:0
}
.profile-nav {
    z-index:10000;
    position:relative;
    list-style:none;
    float:right;
    width:100%
}
.profile-nav li {
    float:right;
    position:relative
}
.profile-nav a {
    display:block
}
span.deprecated {
    color:#e80000;
    background-color:transparent
}
.welcome {
    margin:12px 10px 0 0;
    color:#fff;
    opacity:.5
}
.article-body ul {
    line-height:140%
}
.article-body ul.activity-dropdown li {
    text-align:left;
    border-bottom:1px solid #efefef;
    padding:10px 10px 10px 30px;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:left center;
    background-size:17px auto;
    margin:0
}
.article-body ul.activity-dropdown li span {
    color:grey;
    float:right;
    font-size:.8em
}
.article-body ul.activity-dropdown li img {
    width:30%;
    display:block;
    margin:20px 0 0 0
}
.article-body h1 {
    text-indent:initial
}
.tab {
    opacity:.7;
    padding-left:4px;
    font-weight:400;
    display:block;
    font-size:1.2em;
    line-height:1.9em;
    font-family:proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color:grey;
    text-shadow:0 1px 0 rgba(255, 255, 255, .15);
    border:1px solid rgba(0, 0, 0, .1);
    border-bottom:0;
    -moz-border-top-left-radius:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
    -moz-border-top-right-radius:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%)
}
.sidebar-box {
    background:#fff;
    margin:0 0 20px 0;
    padding:4px;
    -moz-box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1)
}
.sidebar-box.cate-list {
    padding:0
}
.sidebar-box .cate-items {
    overflow:hidden;
    padding-left:14px;
    text-align:center;
    padding-bottom:16px
}
.sidebar-box .cate-items a {
    color:#999;
    background-color:#f6f6f6;
    float:left;
    width:31.3333%;
    margin:0 1% 1% 0;
    padding:0;
    font-size:12px;
    height:29px;
    line-height:29px;
    overflow:hidden
}
.sidebar-box.about-author .article-body {
    padding:0
}
.design a {
    line-height: 20px;
    background-color:#f6f4f0;
    text-decoration:none;
    display:block;
    padding:4px;
    border-bottom:1px solid #efefef;
    color:#000
}
.design a:hover {
    font-weight:bold;
}
.codelist {
    overflow:hidden
}
.codelist-mobile {
    display:none
}
.codelist a {
    width:72px;
    margin:0 5px 8px 5px;
    float:left;
    text-align:center;
    color:#999;
    font-size:12px;
    height:65px;
    overflow:hidden;
    text-decoration:none
}
.codelist a:hover {
    color:#64854c
}
.codelist .codeicon {
    border-radius:5px;
    margin:0 auto;
    display:block;
    margin-bottom:5px
}
.codelist a.item-top {
    width:28%;
    margin:0 8px 10px 0;
    text-align:left;
    height:80px;
    color:#bbb;
    background-color:#f6f6f6;
    border-radius:5px;
    padding:6px 16px
}
.codelist a.item-top .codeicon {
    float:left;
    margin-left:10px;
    margin-right:10px
}
.codelist a.item-top h4 {
    color:#64854c;
    font-size:16px;
    margin-top:10px;
    margin-bottom:10px;
    line-height:1.1;
    text-align:left
}
.codelist a.item-top strong {
    display:block;
    color:#666;
    text-align:left
}
.codelist a.item-top:hover {
    background-color:#f1f1f1
}
.codelist a.item-2 h4 {
    color:#7ccd38
}
.codelist a.item-3 h4 {
    color:#52baf5
}
.codelist h2 {
    font-size:18px;
    font-weight:700;
    margin:12px 0;
    border-bottom:1px solid #eaeaea
}
.navto-nav {
    cursor:pointer;
    margin:8px 2px;
    padding:0;
    font-size:14px
}
.article {
    background:#fff;
    margin:0;
    border:1px solid #efefef;
    border-bottom:0;
    margin-bottom:20px
}
.article-heading {
    background:#fbfbfb;
    border-bottom:1px solid #efefef;
    padding:20px 30px 20px 30px
}
.article-heading-ad {
    max-height:98px;
    text-align:center;
    padding:4px
}
.archive-options {
    background:#fff;
    border:1px solid #efefef;
    padding:20px;
    overflow:hidden
}
.archive-options h2, .article-heading h2 {
    font-size:2.6em;
    margin:0 0 .3em 0
}
.article-body h2 {
    font-size:1.8em;
    margin:2px 0;
    line-height:1.8em
}
h2.left {
    color:#404040;
    background-color:#fff;
    font-size:120%;
    margin-bottom:4px;
    padding-bottom:0;
    margin-top:0;
    padding-top:0;
    font-weight:700
}
span.left_h2 {
    color:#64854c
}
.chapter a:link {
    text-decoration:none;
    color:#64854c;
    background-color:transparent
}
.chapter a:visited {
    text-decoration:none;
    color:#64854c;
    background-color:transparent
}
.chapter a:hover {
    text-decoration:underline;
    color:#64854c;
    background-color:transparent
}
.chapter a::active {
    text-decoration:none;
    color:#64854c;
    background-color:transparent
}
div.chapter {
    font-size:140%;
    width:100%;
    line-height:40px;
    height:40px;
    margin-bottom:10px;
    border-bottom:solid 1px #eaeaea;
    padding-bottom:8px
}
div.chapter div.prev {
    width:40%;
    float:left;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-left:10px
}
div.chapter div.next {
    width:48%;
    float:right;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:10px
}
div.example {
    width:98%;
    color:#000;
    background-color:#f6f4f0;
    background-color:#d0e69c;
    background-color:#dcecb5;
    background-color:#e5eecc;
    margin:0 0 5px 0;
    padding:5px;
    border:1px solid #d4d4d4;
    background-image:-webkit-linear-gradient(#fff, #e5eecc 100px);
    background-image:linear-gradient(#fff, #e5eecc 100px)
}
div.example_code {
    line-height:1.4em;
    width:98%;
    background-color:#fff;
    padding:5px;
    border:1px solid #d4d4d4;
    font-size:110%;
    font-family:Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
    word-break:break-all;
    word-wrap:break-word
}
div.example_result {
    background-color:#fff;
    padding:4px;
    border:1px solid #d4d4d4;
    width:98%
}
div.code {
    width:98%;
    border:1px solid #d4d4d4;
    background-color:#f6f4f0;
    color:#444;
    padding:5px;
    margin:0
}
div.code div {
    font-size:110%
}
div.code div, div.code p, div.example_code p {
    font-family:"courier new"
}
div.tryit_ex {
    clear:both;
    width:600px;
    height:50px;
    margin-bottom:5px
}
div.tryit_ex img {
    border:0;
    float:left;
    margin-right:10px
}
div.tryit_ex h2 {
    padding-top:5px
}
table.browserref {
    border-collapse:collapse;
    width:100%
}
table.browserref tr:nth-child(even) {
    background-color:#f6f4f0
}
table.browserref tr:nth-child(odd) {
    background-color:#fff
}
table.browserref tr.fixzebra {
    background-color:#f6f4f0
}
table.browserref th {
    height:32px;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #d4d4d4;
    background-color:#fff;
    font-weight:normal;
    color:#555;
    padding:5px;
    vertical-align:middle
}
table.browserref td {
    border:1px solid #d4d4d4;
    text-align:center;
    padding:5px;
    padding-top:7px;
    padding-bottom:7px;
    vertical-align:top
}
table.browserref .bsIE {
    background-image:url('/images/compatible_ie.gif')
}
table.browserref .bsFirefox {
    background-image:url('/images/compatible_firefox.gif')
}
table.browserref .bsEdge {
    background-image:url('/images/compatible_edge.gif')
}
table.browserref .bsChrome {
    background-image:url('/images/compatible_chrome.gif')
}
table.browserref .bsSafari {
    background-image:url('/images/compatible_safari.gif')
}
table.browserref .bsOpera {
    background-image:url('/images/compatible_opera.gif')
}
.marked {
    padding:0.2em;
    margin:0;
    background-color: #eceae6;
    border-radius:3px;
    font-weight:bold;
    font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
}
table.lamp {
    width:100%;
    padding:0;
    border:1px solid #d4d4d4
}
table.lamp th {
    color:#000;
    background-color:#fff;
    padding:10px;
    padding-right:5px
}
table.lamp td {
    padding:4px;
    padding-left:0;
    padding-right:10px;
    background-color:#fff
}
table.tecspec td, table.tecspec th {
    border:1px solid #d4d4d4;
    padding:5px;
    padding-top:7px;
    padding-bottom:7px;
    vertical-align:top;
    text-align:left
}
table.reference, table.tecspec {
    border-collapse:collapse;
    width:100%;
    margin-bottom:4px;
    margin-top:4px
}
table.reference .fa {
    font-size:24px;
}
table.reference tr:nth-child(odd) {
    background-color:#f6f4f0
}
table.reference tr:nth-child(even) {
    background-color:#fff
}
table.reference tr.fixzebra {
    background-color:#f6f4f0
}
table.reference th {
    color:#fff;
    background-color:#555;
    border:1px solid #555;
    font-size:12px;
    padding:3px;
    vertical-align:top;
    text-align:left
}
table.reference th a:link, table.reference th a:visited {
    color:#fff
}
table.reference th a:active, table.reference th a:hover {
    color:#ee872a
}
tr td:first-child {
    min-width:25px
}
table.reference td {
    line-height:2em;
    min-width:24px;
    border:1px solid #d4d4d4;
    padding:5px;
    padding-top:7px;
    padding-bottom:7px;
    vertical-align:top
}
table.reference td.example_code {
    vertical-align:bottom
}
table.summary {
    border:1px solid #d4d4d4;
    padding:5px;
    font-size:100%;
    color:#555;
    background-color:#fafad2
}
h2.example, h2.example_head {
    color:#444;
    color:#617f10;
    background-color:transparent;
    margin-top:0
}
h2.example {
    font-size:120%
}
h2.example_head {
    font-size:140%
}
h2.home {
    margin-top:0;
    margin-bottom:5px;
    font-size:120%;
    padding-top:1px;
    padding-bottom:1px;
    padding-left:1px;
    color:#900b09;
    background-color:#fff
}
h2.tutheader {
    margin:0;
    padding-top:5px;
    border-top:1px solid #d4d4d4;
    clear:both
}
.subscribe-bd {
    padding:0;
    text-align:center;
    color:#444;
    background:url(./assets/img/feed.png) no-repeat 36% 50%
}
.socialicons {
    height:30px;
    margin:10px
}
.socialicons a {
    margin:0 8px 8px 0;
    width:30px;
    height:30px;
    float:left;
    display:block;
    text-indent:-9999px
}
.subscribe-bd .placeholder {
    height:35px;
    margin:0;
    width:94%;
    padding:0 3% 0 3%;
    background-color:#fff;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#ccc;
    font-weight:400;
    font-size:1.2em
}
.socialicons .placeholder {
    height:30px;
    margin:0;
    width:60%;
    padding:0 3% 0 3%;
    background-color:#fff;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#ccc;
    font-weight:400;
    font-size:1.2em
}
a.showbtn, a.showbtn:link, a.showbtn:visited, a.tryitbtn, a.tryitbtn:link, a.tryitbtn:visited {
    display:inline-block;
    color:#FFF;
    background-color:#8ac007;
    font-weight:700;
    font-size:12px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:3px;
    padding-bottom:4px;
    text-decoration:none;
    margin-left:5px;
    margin-top:0;
    margin-bottom:5px;
    border:1px solid #aaa;
    border-radius:5px;
    white-space:nowrap
}
a.showbtn:active, a.showbtn:hover, a.tryitbtn:active, a.tryitbtn:hover {
    background-color:#fff;
    color:#90b575
}
a.playitbtn, a.playitbtn:link, a.playitbtn:visited {
    display:inline-block;
    color:#fff;
    background-color:#ffad33;
    border:1px solid #ffad33;
    font-weight:700;
    font-size:11px;
    text-align:center;
    padding:10px;
    padding-top:1px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:1px;
    border-radius:5px;
    white-space:nowrap
}
a.playitbtn:active, a.playitbtn:hover {
    background-color:#fff;
    color:#ffad33
}
a.tryitbtnsyntax:active, a.tryitbtnsyntax:hover, a.tryitbtnsyntax:link, a.tryitbtnsyntax:visited {
    font-family:verdana;
    float:right;
    padding-top:0;
    padding-bottom:2px;
    background-color:#90b575;
    border:1px solid #aaa
}
a.tryitbtnsyntax:active, a.tryitbtnsyntax:hover {
    color:#90b575;
    background-color:#fff
}
div.tutintro p {
    margin-top:0;
    font-size:14px
}
.article-heading h3 {
    font-size:1.5em;
    color:#ccc
}
.article-body h3 {
    font-size:1.4em;
    font-weight:700;
    margin:8px 0
}
.article-body h3.heading {
    margin-top:0
}
.article-heading h3 em {
    font-weight:400
}
.article-body {
    padding:10px 10px 20px 10px
}
.article-body h3.membership {
    font-size:1.6em;
    margin:0 0 20px 0
}
.article-body h3.membership span {
    font-weight:400
}
.article-body-green {
    background-color:#f8faf7;
    border-top:1px solid #ebebeb;
    border-bottom:1px solid #ebebeb
}
.article-body-green #ds-form .field {
    background:#eaf1e6!important
}
.article-intro h1 {
    margin:0 0 10px 0;
    font-size:2.1em;
    text-indent:initial;
    text-decoration:none;
    color:#000
}
.article-intro h1 span {
    color:#64854c
}
.article-intro .tutorialimage:nth-of-type(1) {
    float:right;
    margin:0 0 20px 20px;
    width:50%!important;
    min-width:260px
}
.previous-next-links {
    line-height:24px;
    overflow:hidden;
    padding:10px 30px 10px 30px;
    background:#fbfbfb;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    color:#8590a6;
    font-size:15px;
    border:1px solid #e7eaf1;
    box-shadow:0 1px 3px rgba(0, 37, 55, .05);
    box-sizing:border-box
}
.previous-next-links a {
    color:grey
}
.previous-design-link {
    float:left
}
.next-design-link {
    float:right
}
.article-body p {
    word-wrap:break-word;
    word-break: break-all;
    font-size:13px;
    line-height:2em;
    font-family:Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif
}
.big-middle-column {
    font-size:13px
}
.article-body p a {
    text-decoration:underline
}
a.download {
    background:url('assets/img/download.png') no-repeat 15px center #f0f0f0;
    padding:10px 10px 10px 20px;
    margin:20px 40px 20px 0;
    color:#755c3b;
    display:inline-block;
    width:155px;
    text-align:center;
    border-radius:5px;
    text-decoration:none;
    font-size:20px
}
.article-intro .featured-image {
    display:none
}
.article-body .quote, .article-body blockquote p {
    word-wrap:break-word;
    background:#f3f7f0;
    padding:4px;
    font-size:14px;
    font-style:italic;
    line-height:1.5em;
    font-weight:400!important
}
.article-body .blockquote-full {
    background:#f3f7f0;
    padding:20px;
    margin:0 0 1.5em 0;
    font-size:1.5em;
    font-style:italic;
    line-height:1.5em;
    font-weight:400!important
}
.article-body .pullquote-l {
    background:#f3f7f0;
    padding:20px;
    margin:0 1.5em 1em 0;
    font-size:1.5em;
    font-style:italic;
    line-height:1.5em;
    float:left;
    width:30%
}
.article-body .pullquote-r {
    background:#f3f7f0;
    padding:20px;
    margin:1.5em 0 1.5em 1.5em;
    font-size:1.5em;
    font-style:italic;
    line-height:1.5em;
    float:right;
    width:30%
}
.article-body .wp-caption {
    width:100%!important
}
.article-body .caption, .article-body .wp-caption-text {
    padding:20px;
    margin:0 0 1.5em 0;
    font-style:italic;
    font-weight:400!important;
    border-bottom:1px solid #f1f1f1;
    font-size:1.2em!important;
    line-height:1.5em;
    color:#ccc
}
.article-body .size-full {
    max-width:100%
}
.article-body .two-column {
    -moz-column-count:2;
    -moz-column-gap:2em;
    -webkit-column-count:2;
    -webkit-column-gap:2em;
    margin:0 0 1.5em 0
}
.article-body ol, .article-body ul, .sidebar-box ul {
    margin:0;
    padding:0;
    list-style-type:none
}
.article-body ol li, .article-body ul li {
    font-size:13px;
    word-break: break-all;
}
.article-body ul li p {
    padding:0 10px
}
.article-body ul li, .sidebar-box ul li {
    padding:0 0 0 1.5em;
    margin:0 0 1em 1em;
    background-image:url(./assets/img/bullet.png);
    background-repeat:no-repeat;
    background-position:left .5em
}
.article-body ol li {
    list-style-type:decimal;
    margin:0 0 1em 2.5em;
    padding:0
}
.article-body ol, .article-body ul {
    margin-top:1em;
    margin-bottom:1em
}
.article-body .caption-right {
    display:block
}
.sidebar-box.sidebar-cate {
    padding:0;
    margin:0;
    background-color:#f6f4f0
}
.sidebar-tree {
    border:1px solid #fff;
    margin:0;
    padding:0
}
.sidebar-tree .titlebar {
    height:30px;
    line-height:30px
}
.sidebar-tree .titlebar h3 {
    margin:0;
    color:#67ad03;
    text-align:center
}
.sidebar-tree ul {
    padding:0;
    margin:0
}
.sidebar-tree ul li {
    height:26px;
    line-height:26px;
    padding:5px 2px;
    position:relative;
    vertical-align:middle;
    cursor:pointer;
    display:block;
    border-bottom:1px solid #fff;
    background-image:none;
    margin:0 0 0 1em
}
.sidebar-tree ul li .tit {
    display:block;
    font-weight:700
}
.sidebar-tree ul li ul {
    position:absolute;
    background:#f6f4f0;
    right:100%;
    top:0;
    display:none;
    float:left;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.sidebar-tree ul li ul {
    padding:0 10px
}
.sidebar-tree ul li ul li i {
    color:#666;
    font-size:11px;
    padding:0 10px
}
.sidebar-tree ul li.selected {
    z-index:99;
    position:relative
}
.sidebar-tree ul li.selected .h2-tit {
    position:absolute;
    z-index:88;
    background-color:#f6f4f0;
    border-left:0;
    width:100%;
    height:100%;
    line-height:24px;
    color:#64854c
}
.sidebar-tree a {
    color:#000;
    text-decoration:none
}
.sidebar-tree a:hover {
    color:#000;
    text-decoration:underline
}
.sidebar-tree a:active {
    color:#000
}
.content-ad-728 {
    padding:1em 0 1em 0;
    margin:1em 0 2em 0;
    border-top:1px solid #f1f1f1;
    border-bottom:1px solid #f1f1f1
}
.lower-ad-block {
    float:none!important;
    margin:0!important
}
#ds-form {
    overflow:hidden;
    margin:30px 0 0 0
}
#ds-form.submit {
    margin-top:0
}
#ds-form label {
    width:14%;
    float:left;
    margin:0 0 20px 0;
    padding:0;
    height:35px;
    line-height:3.4em;
    font-size:1.2em
}
#ds-form .input-text, #ds-form input[type=password], #ds-form input[type=text], #ds-form select {
    width:94%;
    float:left;
    padding:0 3% 0 3%;
    background-color:#fff;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#888;
    font-weight:400;
    font-size:1.2em;
    height:35px;
    overflow:hidden
}
#ds-form input[type=checkbox] {
    -webkit-appearance:checkbox
}
#ds-form .input-text {
    border:0;
    padding-top:10px;
    height:28px
}
#ds-form select {
    height:37px;
    background-color:#fff;
    background-image:url(/images/dropdownarrow.png);
    background-position:right center;
    background-repeat:no-repeat;
    border:1px solid #c8c8c8;
    border-radius:3px;
    color:#888;
    font-weight:400;
    cursor:pointer;
    width:100%;
    padding:0 0 0 10px
}
#ds-form textarea {
    height:150px;
    padding-top:10px;
    padding-bottom:10px
}
#ds-form input[type=file] {
    padding:10px 3% 0 3%;
    height:28px
}
#ds-form .field {
    background:#f6f6f5;
    padding:5px;
    border-radius:3px;
    overflow:hidden;
    width:80%;
    margin:0 0 20px 0
}
#ds-form textarea {
    line-height:1.5em
}
#ds-form input:focus, #ds-form textarea:focus {
    color:#111;
    opacity:.7
}
#ds-form .hidden-category {
    display:none
}
#ds-form .show-category {
    display:block
}
.field-info {
    margin:10px 0 5px 15px;
    float:left;
    color:#111;
    opacity:.5
}
.signup-gravatar {
    background-size:37px;
    background-position:right center;
    background-repeat:no-repeat;
    background-image:url(/images/gravatar-signup.gif)
}
.error, .success {
    padding:10px;
    color:#fff;
    font-weight:700;
    font-size:1.2em;
    margin:0 0 20px 0
}
.error {
    background-color:#b97d7d
}
.error p {
    margin:0;
    padding:0;
    font-size:1em
}
.success {
    background-color:#96b97d
}
.archive-list .categories {
    white-space:nowrap
}
.article-feature-home {
    background:#fff;
    margin:0 0 20px 0;
    border:1px solid #efefef
}
.article-feature-heading {
    background:#fbfbfb;
    border-bottom:1px solid #efefef;
    padding:20px
}
.article-feature-body {
    padding:20px
}
.article-feature-body .tutorialimage {
    display:none
}
.article-feature-heading h2 {
    margin:0 0 10px 0;
    font-size:1.8em
}
.article-feature-heading h3 {
    font-size:1.2em;
    color:#666;
    font-weight:400
}
.article-feature-home p {
    margin:0 0 20px 0;
    font-size:1.2em
}
.article-feature-home p:last {
    margin:0
}
.home_feature_thumbnail {
    margin:0 0 20px 0
}
.archive-list {
    background:#fff;
    margin:0 0 20px 0;
    border:1px solid #efefef;
    overflow:hidden
}
.archive-list-item:nth-child(even) {
    background:#fbfbfb;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef
}
.archive-list-item {
    padding:20px;
    overflow:hidden
}
.archive-list-item h2 {
    font-weight:700;
    margin:0 0 10px 0;
    font-size:1.2em
}
.archive-list-item p {
    margin:0 0 10px 0
}
.archive-list-item .tutorialimage {
    display:none
}
.author-archive-profileimage {
    float:right;
    margin:0 0 20px 20px
}
.author-archive-intro h2 {
    margin:0 0 10px 0
}
.article-body .author-social-links li {
    height:30px;
    padding:10px 0 0 40px;
    margin:0
}
.left-column .gallery-list .design img {
    margin-bottom:10px
}
.image-layout-style {
    background:0
}
.archive-list .archive-list-item img {
    float:left;
    margin:0 20px 10px 0;
    width:90%
}
.home-latest-articles .archive-list-item img {
    float:right!important;
    margin:0 0 10px 20px;
    width:35%
}
.archive-list-item .colors a {
    display:block;
    float:left;
    text-indent:-9999px;
    width:10px;
    height:10px;
    border-radius:10px
}
.archive-list-item img.wp-post-image {
    max-height:109px;
    float:left;
    width:25%
}
.archive-list-item .post-intro {
    float:right;
    width:70%
}
.archive-gallery .archive-list-item img.gallery-image {
    float:left;
    width:47%
}
.archive-gallery .archive-list-item .design-information {
    float:right;
    width:47%
}
.image-layout-style {
    background:0;
    border:0
}
.image-layout-style .archive-list-item {
    width:47.5%;
    float:left;
    overflow:hidden;
    background:#fbfbfb;
    border:0 solid #efefef;
    margin:0 1% 10px 0;
    padding:1%
}
.image-layout-style .author, .image-layout-style .categories, .image-layout-style .colors, .image-layout-style .date, .image-layout-style h2, .image-layout-style p {
    display:none
}
.image-layout-style .archive-list-item img {
    display:block;
    width:100%!important;
    margin:0
}
.image-layout-style .image-alternative {
    width:90%;
    padding:15% 5% 15% 5%;
    height:50px;
    text-indent:0;
    color:#333;
    font-weight:700;
    font-size:1.4em;
    background-image:none
}
.image-layout-style .archive-list-item:nth-child(even) {
    margin:0 0 10px 0
}
.gallery-layout-toggle {
    margin-top:24px
}
.archive-options .choose-color {
    overflow:hidden
}
.archive-options .choose-color a {
    display:block;
    float:left;
    text-indent:-9999px;
    width:15px;
    height:15px;
    margin:0 5px 5px 0;
    border-radius:15px
}
.archive-options .choose-color a.remove_filter {
    color:#64854c;
    text-indent:0
}
.design-image img, .design-image-detail img, .gallery-image {
    -webkit-box-shadow:rgba(0, 0, 0, .246094) 0 1px 2px 0, transparent 0 0 0 0, transparent 0 0 0 0;
    border-radius:3px;
    border-style:solid;
    border-width:3px;
    border-color:#fff;
    box-shadow:rgba(0, 0, 0, .246094) 0 1px 2px 0, transparent 0 0 0 0, transparent 0 0 0 0;
    box-sizing:border-box;
    outline-color:#585652;
    outline-width:0
}
.team-member {
    width:30%;
    margin:0 3% 0 0;
    float:left;
    overflow:hidden
}
.team {
    overflow:hidden
}
.team-member img {
    width:100%;
    margin:0 0 20px 0
}
.team-member h3 {
    font-size:1.6em;
    margin-top:0
}
.membership-benefit {
    width:30%;
    margin:0 3% 0 0;
    float:left;
    overflow:hidden;
    text-align:center
}
.membership-benefits {
    overflow:hidden
}
.membership-benefit img {
    width:100%;
    margin:0 0 20px 0
}
.membership-benefit h3 {
    font-size:1.6em;
    margin-top:0;
    font-weight:400
}
.membership-benefit p {
    color:#555
}
.profile-intro {
    overflow:hidden
}
.profile-intro h2 {
    margin:0 0 10px 0
}
.profile-intro h3 {
    font-size:1.4em;
    font-weight:400;
    margin:0 0 10px 0
}
.profile-intro h3 a {
    color:#ccc
}
span.accepted, span.pending, span.rejected {
    text-transform:uppercase;
    font-size:.8em;
    padding:3px 6px 3px 6px;
    margin:0 0 0 5px
}
span.pending {
    background:#f7e8c4
}
span.rejected {
    background:#efd4d4
}
span.accepted {
    background:#d9e8cf
}
.design-image {
    background:#fbfbfb;
    padding:20px 0 20px 0;
    width:100%;
    text-align:center;
    border-bottom:0
}
.design-image img {
    width:94%
}
.design-image-detail {
    overflow:hidden;
    background:#fdfdfd;
    margin:0 0 20px 0;
    padding:20px 0 20px 0;
    width:100%;
    text-align:center
}
.design-image-detail img {
    width:44%;
    margin:0 3% 0 3%;
    float:left
}
.design-details {
    overflow:hidden
}
.design-description {
    width:45%;
    margin:0 5% 0 0;
    float:left;
    min-width:198px
}
.design-meta {
    width:45%;
    float:left;
    min-width:198px
}
.design-page .author, .design-page .categories, .design-page .design-colors, .design-page .rating {
    border-bottom:1px solid #efefef;
    width:100%;
    padding:10px 0 10px 25px;
    margin:0;
    display:block
}
.related-designs {
    overflow:hidden
}
.related-designs img {
    width:30%;
    margin:5px 3% 5px 0;
    float:left
}
.article-body .star-rating li {
    display:inline;
    margin:0;
    padding:0
}
.star-rating .current-rating, .star-rating a {
    position:absolute;
    top:0;
    left:0;
    text-indent:-1000em;
    height:17px;
    line-height:17px;
    outline:0;
    overflow:hidden;
    border:0
}
.star-rating a:active, .star-rating a:focus, .star-rating a:hover {
    background-position:left bottom
}
.star-rating a.one-star {
    width:10%;
    z-index:11
}
.star-rating a.two-stars {
    width:20%;
    z-index:10
}
.star-rating a.three-stars {
    width:30%;
    z-index:9
}
.star-rating a.four-stars {
    width:40%;
    z-index:8
}
.star-rating a.five-stars {
    width:50%;
    z-index:7
}
.star-rating a.six-stars {
    width:60%;
    z-index:6
}
.star-rating a.seven-stars {
    width:70%;
    z-index:5
}
.star-rating a.eight-stars {
    width:80%;
    z-index:4
}
.star-rating a.nine-stars {
    width:90%;
    z-index:3
}
.star-rating a.ten-stars {
    width:100%;
    z-index:2
}
.star-rating .current-rating {
    z-index:1;
    background-position:left center;
    background-size:auto
}
span.new {
    float:right;
    color:#fff;
    background-color:#90b575;
    font-weight:700;
    padding-left:1px;
    padding-right:1px;
    border:1px solid #fff;
    outline:1px solid #90b575;
    line-height:16px
}
.sidebar-box table {
    width:100%;
    margin-top:10px
}
.sidebar-box td, .sidebar-box td.key {
    padding:5px 20px 5px 0;
    vertical-align:middle;
    font-size:1em;
    color:grey
}
.sidebar-box td.key {
    color:#000
}
.sidebar-box tr {
    border-bottom:1px solid #efefef;
    display:block
}
.sidebar-box table td:nth-child(odd) {
    width:30px
}
.sidebar-box td.step {
    width:40px!important
}
.archive-gallery .archive-list-item img {
    width:45%
}
#wp_page_numbers {
    overflow:hidden
}
#wp_page_numbers ul {
    margin:0;
    padding:0 0 20px 0;
    width:auto
}
#wp_page_numbers li {
    display:block;
    float:left;
    text-align:center
}
#wp_page_numbers li a {
    background-color:#fbfbfb;
    text-decoration:none;
    padding:3px 8px 3px 8px;
    display:block;
    float:left;
    margin:0 5px 5px 0;
    text-align:center;
    border:1px solid #fbfbfb;
    color:#acacac;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px
}
#wp_page_numbers li {
    color:#acacac
}
#wp_page_numbers li a:hover {
    border:1px solid #dedede
}
#wp_page_numbers .active_page a {
    opacity:.7;
    color:grey;
    text-shadow:0 1px 0 rgba(255, 255, 255, .15);
    border:1px solid rgba(0, 0, 0, .2);
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%)
}
#wp_page_numbers li span {
    text-decoration:none;
    padding:3px 8px 3px 8px;
    display:block;
    float:left;
    margin:0 5px 5px 0;
    text-align:center;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px opacity:.7;
    color:grey;
    text-shadow:0 1px 0 rgba(255, 255, 255, .15);
    border:1px solid rgba(0, 0, 0, .2);
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%)
}
#wp_page_numbers .active_page a:hover {
    border:1px solid rgba(0, 0, 0, .2)
}
#wp_page_numbers .page_info {
    width:auto;
    padding:2px 6px 2px 6px
}
#wp_page_numbers .space {
    margin:0 10px 0 0
}
.gallery-list {
    padding:0
}
.design {
    padding:4px;
    margin:0;
    overflow:hidden
}
.design img {
    margin:0 0 5px 0
}
.design:nth-child(even) {
    background:#fbfbfb;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef
}
.design .author {
    margin:2px 0 0 0
}
.swatch {
    background:#e9e9e9;
    float:right;
    padding:0 2px 0 2px
}
.swatch a {
    width:11px;
    height:11px;
    text-indent:-9999px;
    float:left;
    margin:4px 3px 4px 3px
}
.recent-members .member {
    height:60px
}
.recent-members img {
    float:left;
    margin:0 15px 0 0;
    width:40px;
    height:40px
}
.ad-box {
    margin:0;
    padding:0;
    text-align:center
}
.ad-box-large {
    background-color:#fff
}
.ad-box-premium {
    background-color:#efefef
}
.ad-336280 {
    width:360px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
    padding:8px
}
.ad-600160 {
    width:100%;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
    padding:2px
}
.ad-premium {
    width:260px;
    margin:0 auto;
    text-align:center;
    overflow:hidden
}
.qqinfo {
    text-align:center;
    border-top:1px solid #efefef;
    padding-top:4px
}
.qqinfo span {
    display:inline-block;
    white-space:nowrap;
    text-align:center
}
.advertise-here {
    margin:0 auto 10px auto;
    padding:0 19px 10px 19px;
    background-color:#e9e9e9;
    text-align:center;
    overflow:hidden
}
.advertise-here a {
    width:100%;
    background:#efefef;
    display:block;
    padding:5px 0 5px 0;
    color:#ccc
}
.advertise-here.list-link a {
    color:#64854c;
    font-weight:700
}
ul.membership {
    list-style:none;
    margin:10px 0 0 0;
    padding:0 14px 14px 14px
}
ul.membership li {
    padding:0 0 0 30px;
    margin:0 0 10px 0;
    line-height:1.5em;
    color:#3e3e3e;
    font-weight:400;
    background:url(./assets/img/bullet-membership.png) no-repeat left center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
#ds-form input.button-brown, #ds-form input.button-green, .button-brown, .button-green {
    color:#fff;
    padding:7px 10px 7px 10px;
    -webkit-appearance:none;
    width:150px;
    margin:10px 0 0 0;
    font-weight:700;
    text-shadow:0 1px 0 rgba(0, 0, 0, .2);
    border:1px solid rgba(87, 121, 63, .8);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#90b575;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%)
}
#ds-form input.button-green:hover, .button-green:hover {
    background-color:#90b575;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    background-image:url();
    background-image:-moz-linear-gradient(top, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-o-linear-gradient(top, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
    background-image:linear-gradient(top, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%)
}
#ds-form input.button-green:active, .button-green:active {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none
}
#ds-form input.button-brown, .button-brown {
    border:1px solid rgba(68, 64, 56, .8);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#4f4941;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    background-image:url();
    background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:linear-gradient(bottom, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%)
}
#ds-form input.button-brown:hover, .button-brown:hover {
    border:1px solid rgba(68, 64, 56, .8);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#4f4941;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    background-image:url();
    background-image:-moz-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-o-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-webkit-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%)
}
#ds-form input.button-brown:active, .button-brown:active {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none
}
.collection-saved, .collection-saved:hover {
    border:1px solid rgba(68, 64, 56, .8);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#4f4941;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    box-shadow:0 1px 2px rgba(0, 0, 0, .4);
    background-image:url();
    background-image:-moz-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-o-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:-webkit-linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%);
    background-image:linear-gradient(right, rgba(0, 0, 0, .15) -17%, rgba(255, 255, 255, .15) 117%)
}
.footer span {
    padding:10px 0 0 0;
    color:#929292
}
.footer a, .footer p {
    margin:0 0 10px 0
}
.footer a {
    color:#6a6a6a
}
ul.st-autocomplete {
    z-index:2;
    background-color:#fff;
    border:1px solid #c8c8c8;
    -webkit-border-radius:3px;
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
    top:34px;
    font-size:1em;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif
}
ul.st-autocomplete li {
    border-top:1px solid #efefef;
    cursor:pointer;
    padding:10px 10px 10px 20px;
    overflow:hidden
}
ul.st-autocomplete li:first-child {
    border-top:0
}
ul.st-autocomplete li.active {
    background:#fbfbfb
}
ul.st-autocomplete li p {
    margin:0
}
ul.st-autocomplete li .sections .section {
    display:inline
}
ul.st-autocomplete em {
    font-style:normal;
    background-color:transparent
}
ul.st-autocomplete li.active em {
    font-weight:700
}
.jcrop-holder {
    direction:ltr;
    text-align:left
}
.jcrop-hline, .jcrop-vline {
    background:#FFF url(/css/Jcrop.gif) top left repeat;
    font-size:0;
    position:absolute
}
.jcrop-vline {
    height:100%;
    width:1px!important
}
.jcrop-hline {
    height:1px!important;
    width:100%
}
.jcrop-vline.right {
    right:0
}
.jcrop-hline.bottom {
    bottom:0
}
.jcrop-handle {
    background-color:#333;
    border:1px #eee solid;
    font-size:1px
}
.jcrop-tracker {
    height:100%;
    width:100%;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none
}
.jcrop-handle.ord-n {
    left:50%;
    margin-left:-4px;
    margin-top:-4px;
    top:0
}
.jcrop-handle.ord-s {
    bottom:0;
    left:50%;
    margin-bottom:-4px;
    margin-left:-4px
}
.jcrop-handle.ord-e {
    margin-right:-4px;
    margin-top:-4px;
    right:0;
    top:50%
}
.jcrop-handle.ord-w {
    left:0;
    margin-left:-4px;
    margin-top:-4px;
    top:50%
}
.jcrop-handle.ord-nw {
    left:0;
    margin-left:-4px;
    margin-top:-4px;
    top:0
}
.jcrop-handle.ord-ne {
    margin-right:-4px;
    margin-top:-4px;
    right:0;
    top:0
}
.jcrop-handle.ord-se {
    bottom:0;
    margin-bottom:-4px;
    margin-right:-4px;
    right:0
}
.jcrop-handle.ord-sw {
    bottom:0;
    left:0;
    margin-bottom:-4px;
    margin-left:-4px
}
.jcrop-dragbar.ord-n, .jcrop-dragbar.ord-s {
    height:7px;
    width:100%
}
.jcrop-dragbar.ord-e, .jcrop-dragbar.ord-w {
    height:100%;
    width:7px
}
.jcrop-dragbar.ord-n {
    margin-top:-4px
}
.jcrop-dragbar.ord-s {
    bottom:0;
    margin-bottom:-4px
}
.jcrop-dragbar.ord-e {
    margin-right:-4px;
    right:0
}
.jcrop-dragbar.ord-w {
    margin-left:-4px
}
.jcrop-light .jcrop-hline, .jcrop-light .jcrop-vline {
    background:#FFF;
    filter:Alpha(opacity=70)!important;
    opacity:.7!important
}
.jcrop-light .jcrop-handle {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background-color:#000;
    border-color:#FFF;
    border-radius:3px
}
.jcrop-dark .jcrop-hline, .jcrop-dark .jcrop-vline {
    background:#000;
    filter:Alpha(opacity=70)!important;
    opacity:.7!important
}
.jcrop-dark .jcrop-handle {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background-color:#FFF;
    border-color:#000;
    border-radius:3px
}
.jcrop-holder img, img.jcrop-preview {
    max-width:none
}
.imgset {
    float:left;
    border:0;
    margin-right:6px
}
.serieslist-content {
    font-size:1.2em;
    color:#000;
    text-align:left
}
.serieslist-box {
    background:#fff;
    width:90%;
    padding:6px;
    margin:10px auto 0 auto;
    border:1px solid #1e3a96;
    border-bottom:2px solid #1e3a96
}
html>body .serieslist-box {
    height:auto
}
.seriestitle {
    margin:10px 0 20px 10px;
    font-size:1.4em;
    font-weight:700
}
.seriestitle span {
    font-color:#000;
    font-style:italic
}
ul.serieslist-ul {
    margin:0;
    padding:0;
    list-style-type:none
}
li.serieslist-li {
    margin:0;
    padding:0
}
.seriesbox {
    display:inline-block;
    background:#f3f7f0;
    width:100%;
    text-align:left;
    padding:6px 6px 12px 6px;
    min-width:125px
}
.seriesbox img {
    margin:0 12.5px 0 12.5px
}
h3.series-title-post-page {
    font-size:1.1em;
    color:#1e3a96;
    text-align:center
}
p.series-description {
    font-style:italic
}
.seriesmeta {
    background-color:#e5f3ff;
    font-size:.8em
}
.series-nav-left {
    float:left
}
.series-nav-right {
    float:right
}
#footer {
    min-width:100%;
    margin-top:20px!important
}
#footer .runoob-block {
    background:#fff;
    border-top:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
    padding-bottom:50px
}
#footer .runoob-block .runoob {
    width:64%;
    margin:0 auto;
    min-height:200px;
}
#footer .runoob dl {
    width:15%;
    padding-left:30px;
    color:gray;
    margin:25px 0;
    float:left;
    border-left:1px solid #e4e4e4;
    min-height:175px
}
#footer .runoob dl dt {
    font-size:14px;
    color:#666;
    font-weight:500
}
#footer .runoob dl dd {
    font-size:12px;
    margin-top:10px
}
#footer .runoob a {
    color:gray;
    padding-left:5px
}
#footer .runoob a:hover {
    color:#35b558
}
#footer .search-share {
    width:16%;
    float:left;
    min-height:226px;
    border-left:1px solid #e4e4e4;
    padding:20px 0 0 40px
}
#footer .search-share .app-download a {
    padding-left:0
}
#footer .search-share .app-download a:hover p, #footer .search-share .app-download a:hover strong {
    color:#35b558
}
#footer .search-share .app-download img {
    display:block;
    float:left;
    margin-right:15px
}
#footer .search-share .app-download strong {
    font-size:18px;
    color:#666;
    margin-bottom:8px
}
#footer .search-share .app-download p {
    font-size:14px;
    color:gray;
    background-size:7px 13px
}
#footer .search-share .share {
    margin-top:15px
}
#footer .search-share .share a {
    background:url(../images/icon.png) -23px 0 no-repeat;
    width:32px;
    height:32px;
    display:inline-block;
    float:left;
    margin-right:10px;
    position:relative
}
#footer .search-share .share a.sina-icon {
    background-position:-23px 0
}
#footer .search-share .share a.sina-icon:hover {
    background-position:-23px -40px
}
#footer .search-share .share a.qq-icon {
    background-position:-23px -82px
}
#footer .search-share .share a.qq-icon:hover {
    background-position:-23px -122px
}
#footer .search-share .share a.qq-icon .weinxinpop {
    position:absolute;
    bottom:32px;
    left:-48px;
    z-index:200;
    display:none
}
#footer .search-share .share a.qq-icon:hover .weinxinpop {
    display:block
}
#footer .search-share .share a.tieba-icon {
    background-position:-145px 0
}
#footer .search-share .share a.tieba-icon:hover {
    background-position:-145px -40px
}
#footer .copyright {
    font-size:12px;
    color:#999;
    margin:0 auto;
    width:100%;
    text-align:center;
    padding:20px 0
}
#footer .copyright a {
    color:#999
}
#footer .copyright a:hover {
    color:#35b558
}
.fade.in {
    opacity:1
}
.panel-modal {
    position:absolute
}
.fixed-btn .modal.fade.in {
    top:auto;
    bottom:0;
    height:188px;
    width:128px;
    padding:10px;
    margin:0;
    right:65px;
    left:auto;
    text-align:center
}
.fixed-btn .modal.fade.in h4 {
    margin:0 0 10px;
    font-size:14px
}
.fixed-btn .modal.fade.in:after, .fixed-btn .modal.fade.in:before {
    position:absolute;
    top:109px;
    right:-8px;
    content:'';
    display:inline-block;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:9px solid white
}
.fixed-btn .modal.fade.in:before {
    right:-9px;
    border-left:9px solid #d9d9d9
}
.fixed-btn {
    position:fixed;
    right:1%;
    bottom:5%;
    width:40px;
    border:1px solid #eee;
    background-color:white;
    font-size:24px;
    z-index:1040;
    -webkit-backface-visibility:hidden
}
.fixed-btn a {
    display:inline-block;
    width:40px;
    height:40px;
    text-align:center
}
.fixed-btn a:after {
    content:".";
    font-size:0;
    height:100%;
    display:inline-block;
    vertical-align:middle
}
.fixed-btn a i {
    vertical-align:middle
}
.fixed-btn .go-top {
    border-bottom:1px solid #eee
}
.fixed-btn .writer {
    background-color:#96b97d;
    font-size:18px;
    color:white
}
.fixed-btn .hide-go-top {
    display:none;
    opacity:0;
    filter:alpha(opacity=0)
}
.modal.fade {
    -webkit-transition:opacity .3s linear, top .3s ease-out;
    -moz-transition:opacity .3s linear, top .3s ease-out;
    -o-transition:opacity .3s linear, top .3s ease-out;
    transition:opacity .3s linear, top .3s ease-out;
    top:-25%
}
.modal.fade.in {
    top:10%
}
.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee
}
.modal-header .close {
    margin-top:2px
}
.modal-header h3 {
    margin:0;
    line-height:30px
}
.modal-body {
    position:relative;
    overflow-y:auto;
    max-height:400px;
    padding:15px
}
.modal-form {
    margin-bottom:0
}
.modal-footer {
    padding:14px 15px 15px;
    margin-bottom:0;
    text-align:right;
    background-color:#f5f5f5;
    border-top:1px solid #ddd;
    -webkit-border-radius:0 0 6px 6px;
    -moz-border-radius:0 0 6px 6px;
    border-radius:0 0 6px 6px;
    -webkit-box-shadow:inset 0 1px 0 white;
    -moz-box-shadow:inset 0 1px 0 white;
    box-shadow:inset 0 1px 0 white;
    *zoom:1
}
.modal-footer:before, .modal-footer:after {
    display:table;
    content:"";
    line-height:0
}
.modal-footer:after {
    clear:both
}
.modal-footer .btn+.btn {
    margin-left:5px;
    margin-bottom:0
}
.modal-footer .btn-group .btn+.btn {
    margin-left:-1px
}
.modal-footer .btn-block+.btn-block {
    margin-left:0
}
.hide {
    display:none
}
.modal {
    background-color:white;
    border:1px solid #d9d9d9;
    font-size:14px;
    font-weight:normal;
    line-height:20px;
    position:fixed;
    top:10%;
    left:50%;
    z-index:1050;
    width:560px;
    margin-left:-280px;
    border:1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    background-clip:padding-box;
    outline:0
}
.panel-modal .panel-body {
    overflow-y:auto;
    min-height:90px;
    max-width:150px
}
.hl-default {
    color:#000
}
.hl-code {
    color:Gray
}
.hl-brackets {
    color:Olive
}
.hl-comment {
    color:#a50
}
.hl-quotes {
    color:#8b0000
}
.hl-string {
    color:#a11
}
.hl-identifier {
    color:#05a
}
.hl-builtin {
    color:Teal
}
.hl-reserved {
    color:Green
}
.hl-inlinedoc {
    color:#00f
}
.hl-var {
    color:#00008b
}
.hl-url {
    color:#00f
}
.hl-special {
    color:Navy
}
.hl-number {
    color:Maroon
}
.hl-inlinetags {
    color:#00f
}
.hl-main {
    background-color:#fff;
    font-family:Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
    white-space:pre-wrap;
    word-break:break-all;
    word-wrap:break-word
}
.hl-gutter {
    background-color:#999;
    color:#fff
}
.hl-table {
    font-family:courier;
    font-size:12px;
    border:solid 1px #d3d3d3
}
@media handheld, only screen and (max-width:1024px) {
    .right-column {
        display:none
    }
    .pc-nav {
        display:none
    }
    .mobile-nav {
        display:inline-block;
        width:100%
    }
    .middle-column-home {
        width:76%;
        margin-right:0
    }
    .middle-column {
        width:82%
    }
    .big-middle-column {
        width:100%
    }
    .swatch {
        display:none
    }
    .home_feature_thumbnail {
        width:43%;
        float:right;
        margin:0 0 20px 20px
    }
    .sub-navigation-articles {
        display:none
    }
    #footer .runoob-block {
        display:none
    }
    #footer .copyright {
        background:#fff;
        padding-top:20px;
        padding-bottom:20px;
        margin-top:20px;
        -moz-box-shadow:0 -1px 1px #ececec;
        box-shadow:0 -1px 1px #ececec
    }
    .codelist a.item-top h4 {
        font-size:14px;
        text-align:left;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis
    }
    .codelist a.item-top {
        width:40%
    }
}
@media handheld, only screen and (max-width:768px) {
    body {
        -webkit-text-size-adjust:none;
        -webkit-appearance:none
    }
    .right-list button {
        display:block
    }
    input[type=radio] {
        -webkit-appearance:"radio"
    }
    .shortcuts .shortcut {
        width:22.4%
    }
    .container, .row, body {
        min-width:0;
        margin-left:0;
        margin-right:0;
        padding-left:0;
        padding-right:0
    }
    .col, .eightcol, .elevencol, .fifteencol, .fivecol, .fourcol, .fourteencol, .ninecol, .onecol, .sevencol, .sixcol, .sixteencol, .tencol, .thirteencol, .threecol, .twelvecol, .twocol {
        width:auto;
        float:none;
        margin-left:0;
        margin-right:0
    }
    .ad-336280 {
        display:none
    }
    .archive-options {
        display:none
    }
    .left-column {
        display:none
    }
    .right-column {
        display:none
    }
    .middle-column, .middle-column-home {
        width:100%
    }
    .ad-box {
        margin:0;
        padding:10px
    }
    .small-ads {
        margin:0;
        padding:10px
    }
    .small-ads .bsap a {
        border:4px solid #ededed
    }
    .small-ads .bsap .odd {
        margin:0 8px 8px 0
    }
    .small-ads .bsap .even {
        margin:0 0 8px 0
    }
    .small-ads .bsap a, .small-ads .bsap a img {
        width:88px
    }
    .search {
        width:30%;
        float:right
    }
    .logo {
        width:40%;
        float:left
    }
    .codelist a.item-top strong {
        text-align:left
    }
    .right-column {
        display:none
    }
}
@media handheld, only screen and (max-width:480px) {
    div.example_code {
        width:96%
    }
    .shortcuts .shortcut {
        width:45%
    }
    .ad-336280 {
        width:100%;
        padding:0
    }
    .search {
        width:100%;
        float:none
    }
    .codelist-desktop {
        display:none
    }
    .codelist-mobile {
        display:block
    }
    .search-reveal {
        background-image:url(./assets/img/search.png);
        background-size:15px 15px;
        background-repeat:no-repeat;
        text-indent:-9999px;
        display:inline-block;
        width:20px;
        margin:0;
        float:right
    }
    .logo {
        width:80%;
        float:left
    }
    .logo h1 {
        background-size:198px 30px
    }
    .sub-navigation {
        display:none
    }
    .sub-navigation-mobile {
        display:block;
        width:90%;
        margin:0 auto
    }
    .nav-sub-mobile {
        font-size:1.1em;
        font-family:proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        padding:0
    }
    .mobile-nav-hidden {
        display:none;
        padding:10px 0 0 0;
        background:#fff;
        border-right:1px solid #efefef;
        border-left:1px solid #efefef
    }
    .nav-sub-mobile ul {
        list-style:none
    }
    .nav-sub-mobile li a {
        padding:5px 0 5px 20px;
        display:block;
        text-decoration:none
    }
    .nav-sub-mobile li a:hover, .nav-sub-mobile li.current-cat a {
        background:#f1f1f1
    }
    .nav-sub-mobile li a {
        color:#333
    }
    .nav-sub-mobile li a:hover {
        color:#777
    }
    .archive-list-item img.wp-post-image {
        float:right!important;
        margin:0 0 10px 20px
    }
    .nav-submit {
        display:none
    }
    .left-column {
        display:none
    }
    .right-column {
        display:none
    }
    .nav li, .nav-sub li {
        margin:0 10px 0 0
    }
    .logo, .search {
        text-align:center
    }
    .row-search-mobile {
        margin:0 0 10px 0
    }
    .search input {
        text-align:center
    }
    .search input {
        height:30px
    }
    .search-desktop {
        display:none
    }
    .logo img {
        padding:5px 0 0 0
    }
    .tab {
        margin:0 auto
    }
    .archive-list-item img, .home_feature_thumbnail {
        width:50%!important
    }
    .archive-gallery .archive-list-item img.gallery-image {
        display:inline-block;
        width:100%!important;
        float:none
    }
    .archive-gallery .archive-list-item .design-information {
        width:100%;
        float:none
    }
    .image-alternative {
        display:none
    }
    .image-layout-style .image-alternative {
        display:block
    }
    .middle-column-home {
        width:100%!important
    }
    .article-body .two-column {
        -moz-column-count:1;
        -webkit-column-count:1;
        margin:0 0 1em 0
    }
    .archive-list-item .post-intro {
        float:none;
        width:100%
    }
    .article-heading {
        padding-top:10px;
        padding-bottom:5px;
        padding-left:20px;
        padding-right:20px
    }
    .article-body {
        padding-left:20px;
        padding-right:20px
    }
    .article-body h2, .article-heading h2, .comments-heading h2 {
        font-size:1.7em
    }
    .article-body h3, .article-heading h3, .comments-body h3, .comments-heading h3 {
        font-size:1.5em
    }
    .article-heading h3 {
        font-size:1.2em
    }
    .article-body .quote, .article-body .quote-left, .article-body .quote-right {
        padding:10px;
        font-size:1.2em;
        float:none;
        width:auto;
        margin-left:0;
        margin-right:0
    }
    .comments-heading h2 {
        float:none
    }
    .comments-heading h3 {
        float:none
    }
    .small-ads .bsap a, .small-ads .bsap a img {
        width:125px!important;
        text-align:center
    }
    .image-layout-style .archive-list-item {
        width:94%;
        padding:3%
    }
    .archive-layout-toggle, .gallery-layout-toggle {
        border-radius:3px;
        height:25px;
        opacity:.8
    }
    .gallery-filter-color h3 {
        margin-top:0
    }
    .archive-options .archive-search {
        display:none
    }
    .archive-options .archive-category select {
        height:27px
    }
    .archive-options .archive-category {
        width:60%;
        margin:0
    }
    .article-intro .tutorialimage:nth-of-type(1) {
        float:none;
        width:90%;
        margin:0 0 20px 0
    }
    .design-description {
        width:100%;
        margin:0
    }
    .design-meta {
        width:100%
    }
    .related-designs img {
        width:100%;
        margin:0 0 20px 0
    }
    .article-body ul.activity-dropdown li {
        text-align:left;
        border-bottom:1px solid #efefef;
        padding:10px 10px 10px 30px;
        background-color:#fff;
        background-repeat:no-repeat;
        background-position:left center;
        background-size:17px auto
    }
    .article-body ul.activity-dropdown li span {
        color:grey;
        display:block;
        float:none;
        font-size:.8em
    }
    .article-body ul.activity-dropdown li img {
        width:100%;
        display:block;
        margin:20px 0 0 0
    }
    .content-ad-728 {
        display:none
    }
    .lower-ad-block {
        display:none
    }
    .membership-benefit {
        width:100%;
        margin:0;
        float:none;
        overflow:hidden;
        text-align:left;
        border-bottom:1px solid #efefef;
        margin:0 0 20px 0
    }
    .membership-benefit img {
        float:right;
        width:25%
    }
    #ds-form label {
        width:100%;
        margin:0 0 5px 0
    }
    #ds-form .field {
        width:95%;
        margin:0 0 10px 0
    }
    #ds-form .input-text, #ds-form input[type=password], #ds-form input[type=text], #ds-form select, #ds-form textarea {
        width:93%
    }
    .team-member {
        width:100%;
        margin:0
    }
    .team-member img {
        width:30%;
        margin:0 0 20px 20px;
        float:right
    }
    .team-member h3 {
        font-size:1.2em
    }
    .codelist a.item-top .codeicon {
        display:none
    }
    .codelist a.item-top strong {
        display:none
    }
    .codelist a.item-top {
        width:28%;
        height:40px;
        color:#bbb;
        background-color:#f6f6f6;
        border-radius:5px;
        padding:0
    }
    .codelist a.item-top h4 {
        font-size:14px;
        text-align:center
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .logo h1 {
        background:url(./assets/img/runoob-logo@2x.png) no-repeat left center;
        background-size:258px 39px
    }
    .socialicons .rss {
        background:url(./assets/img/rss@2x.png)
    }
    articlesmedia="screen" .socialicons .rss {
        background:url(./assets/img/rss.png);
        opacity:.7
    }
    .socialicons .dribbble, .socialicons .email, .socialicons .facebook, .socialicons .fivehundredpx, .socialicons .googleplus, .socialicons .rss, .socialicons .twitter {
        -webkit-background-size:auto 30px;
        -moz-background-size:auto 30px;
        background-size:auto 30px
    }
    .nav .current {
        background-image:url(./assets/img/navarrow@2x.png);
        -webkit-background-size:auto 8px;
        -moz-background-size:auto 8px;
        background-size:auto 8px
    }
    ul.membership li {
        background:url(./assets/img/bullet-membership@2x.png) no-repeat left center;
        -webkit-background-size:auto 17px;
        -moz-background-size:auto 17px;
        background-size:auto 17px
    }
    .article-body ul li {
        list-style-type:none;
        background-image:url(./assets/img/bullet@2x.png);
        background-repeat:no-repeat;
        background-position:left .4em;
        padding:0 0 0 1.2em;
        -webkit-background-size:auto 8px;
        -moz-background-size:auto 8px;
        background-size:auto 8px
    }
}
@media handheld, only screen and (max-width:400px) {
    .logo h1 {
        background:url(./assets/img/runoob-logo@2x.png) no-repeat left center;
        background-size:198px 30px
    }
}
@media handheld, only screen and (max-width:1260px) {
    .runoob-block {
        display: none;
    }
    #footer .copyright {
        background: #fff;
    }
}
.important {
    color: red;
    font-weight: bold;
}
.hide_box {
    z-index:999;
    filter:alpha(opacity=50);
    background:#666;
    opacity: 0.5;
    -moz-opacity: 0.5;
    left:0;
    top:0;
    height:99%;
    width:100%;
    position:fixed;
    display:none;
}
.shang_box {
    width:540px;
    height:540px;
    padding:10px;
    background-color:#fff;
    border-radius:10px;
    position:fixed;
    z-index:1000;
    left:50%;
    top:50%;
    margin-left:-280px;
    margin-top:-280px;
    border:1px dotted #dedede;
    display:none;
}
.shang_box img {
    border:none;
    border-width:0;
}
.dashang {
    display:block;
    width:100px;
    margin:5px auto;
    height:25px;
    line-height:25px;
    padding:10px;
    background-color:#E74851;
    color:#fff;
    text-align:center;
    text-decoration:none;
    border-radius:10px;
    font-weight:bold;
    font-size:16px;
    transition: all 0.3s;
}
.dashang:hover {
    opacity:0.8;
    padding:15px;
    font-size:18px;
}
.shang_close {
    float:right;
    display:inline-block;
}
.shang_logo {
    display:block;
    text-align:center;
    margin:20px auto;
}
.shang_tit {
    width: 100%;
    height: 75px;
    text-align: center;
    line-height: 66px;
    color: #a3a3a3;
    font-size: 16px;
    background: url('//static.runoob.com/images/dashang/cy-reward-title-bg.jpg');
    font-family:'Microsoft YaHei';
    margin-top: 7px;
    margin-right:2px;
}
.shang_tit p {
    color:#a3a3a3;
    text-align:center;
    font-size:16px;
}
.shang_payimg {
    width:140px;
    padding:10px;
    border:6px solid #EA5F00;
    margin:0 auto;
    border-radius:3px;
    height:140px;
}
.shang_payimg img {
    display:block;
    text-align:center;
    width:140px;
    height:140px;
}
.pay_explain {
    text-align:center;
    margin:10px auto;
    font-size:12px;
    color:#545454;
}
.radiobox {
    width: 16px;
    height: 16px;
    background: url('//static.runoob.com/images/dashang/radio2.jpg');
    display: block;
    float: left;
    margin-top: 5px;
    margin-right: 14px;
}
.checked .radiobox {
    background:url('//static.runoob.com/images/dashang/radio1.jpg');
}
.shang_payselect {
    text-align:center;
    margin:0 auto;
    margin-top:40px;
    cursor:pointer;
    height:60px;
    width:280px;
}
.shang_payselect .pay_item {
    display:inline-block;
    margin-right:10px;
    float:left;
}
.shang_info {
    clear:both;
}
.shang_info p, .shang_info a {
    color:#C3C3C3;
    text-align:center;
    font-size:12px;
    text-decoration:none;
    line-height:2em;
}
.note-body p, .note-body ul li {
    font-size: 14px;
    line-height: 2em;
}
.wxpopup {
    position:relative;
    display:inline-block;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.wxpopup .popuptext {
    visibility:hidden;
    width:160px;
    background-color:#555;
    color:#fff;
    text-align:center;
    border-radius:6px;
    padding:8px 0;
    position:absolute;
    z-index:1;
    bottom:125%;
    left:50%;
    margin-left:-80px
}
.wxpopup .popuptext::after {
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:#555 transparent transparent transparent
}
.wxpopup .show {
    visibility:visible;
    -webkit-animation:fadeIn 1s;
    animation:fadeIn 1s
}
@-webkit-keyframes fadeIn {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
@keyframes fadeIn {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}